<template>
    <div class="app-container">
        <!-- 搜索栏 -->
        <div class="search-bar">
            <select v-model="searchType" class="search-type">
                <option value="title">歌名</option>
                <option value="artist">歌手</option>
                <option value="type">类型</option>
                <option value="tags">标签</option>
            </select>

            <input type="text" v-model="searchQuery" placeholder="请输入搜索内容..." @keyup.enter="performSearch">
            <button @click="performSearch">搜索</button>
        </div>

        <el-table v-loading="loading" :data="songList" style="width: 100%">
            <el-table-column label="歌名" prop="title" min-width="150" show-overflow-tooltip />
            <el-table-column label="歌手" prop="artist" min-width="120" align="center" />
            <el-table-column label="类型" prop="type" min-width="100" align="center" />
            <el-table-column label="标签" min-width="150" align="center">
        <template slot-scope="{ row }">
            <div v-if="row.tags" style="display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;">
                <span 
                    v-for="(tag, index) in row.tags.split(',')" 
                    :key="index" 
                    style="padding: 2px 8px; background-color: #f0f0f0; border-radius: 12px; font-size: 12px; white-space: nowrap;"
                >
                    {{ tag.trim() || '--' }}
                </span>
            </div>
            <span v-else>--</span>
        </template>
    </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="loadingSongList" />
    </div>

</template>


<script>
import { getSongList, getSongById, createSong, updateSong, deleteSong } from '@/api/cd/song'
export default {
    data() {
        return {
            total: 0,
            loading: true,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                title: undefined,
                artist: undefined,
                type: undefined,
                tags: undefined

            },
            searchResults: [],
            searchType: 'title', // 默认搜索字段
            searchQuery: '', // 用户输入的查询词
            searchResults: [], // 搜索结果列表
            showSearch: true,
            songList: [
                // { id: 1, title: '夜空中最亮的星', artist: '逃跑计划', type: '摇滚', tags: ['热门', '经典'] },
                // { id: 2, title: '平凡之路', artist: '朴树', type: '民谣', tags: ['治愈', '流行'] },
                // { id: 3, title: '光年之外', artist: 'GAI', type: '说唱', tags: ['励志', '热血'] },
                // { id: 4, title: '小幸运', artist: '田馥甄', type: '流行', tags: ['清新', '影视'] },
                // { id: 5, title: '演员', artist: '薛之谦', type: '流行', tags: ['情感', '抒情'] }
            ]
        };
    },
    created() {
        this.loadingSongList();
    },
    watch: {
   // 当 searchQuery 改变时，更新对应的字段，并清除其他字段
   searchQuery(newVal) {
        // 清空所有搜索字段
        ['title', 'artist', 'type', 'tags'].forEach(key => {
            this.queryParams[key] = undefined;
        });
        // 设置当前选中字段
        if (newVal !== '') {
            this.queryParams[this.searchType] = newVal;
        }
    },
    // 可选：当 searchType 改变时，也同步当前查询框内容
    searchType(newType) {
        this.searchQuery = this.queryParams[newType] || '';
    }
    },
    methods: {
        performSearch() {
            const query = this.searchQuery.toLowerCase();
            //如果为空 则返回所有
            if (!this.searchQuery) {
                getSongList().then(response => {
                    this.searchResults = response.rows;
                    return this.searchResults;
                })
            };
            getSongList(this.queryParams).then(response => {
                this.songList = response.rows;
                
            });

        },
        loadingSongList() {
            this.loading = true;
            getSongList(this.queryParams).then(response => {
                this.songList = response.rows;
                this.total = response.total;
                console.log(this.songList);
                this.loading = false;
            });
        }
    }
};
</script>

<style scoped>
.app-container {
    max-width: 800px;
    margin: auto;
    padding: 30px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.search-type {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 100px;
}

.search-bar input {
    flex: 1;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.search-bar button {
    width: 80px;
    padding: 10px;
    font-size: 16px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.search-bar button:hover {
    background-color: #0056b3;
}
/* 搜索框样式 */
.el-table {
  font-size: 14px;
}

.el-table th {
  background-color: #f5f7fa;
  color: #1a1a1a;
  font-weight: bold;
}

.el-table__empty-block {
  text-align: center;
  padding: 20px;
}
</style>